<template>
	<view class="filesShow">
		<view v-for="(item, index) in images" :key="index" @click="prviewImage(item)">
			<image :src="item" mode="aspectFill" class="image-style" />
		</view>
		<view v-for="(item, index) in videos" :key="index" class="video-style flex-cc" @click="showVideo(item)">
			<u-icon name="play-right-fill" color="#fff" size="44"></u-icon>
		</view>

		<!-- 视频modal   -->
		<u-modal
			class="video-all-screen"
			v-model="videoShow"
			:show-title="false"
			:show-confirm-button="false"
			:mask-close-able="true"
			width="750rpx"
		>
			<view class="slot-content-modal" v-if="videoShow">
				<video :autoplay="true" :src="videoUrl" style="width: 750rpx" />
			</view>
		</u-modal>
	</view>
</template>
<script>
	export default {
		name: '',
		components: {},
		props: {
			files: {
				type: Array,
				default: () => [
					'/defaultUploadFolder/1648954438689853441/xiao.jpg',
					'/defaultUploadFolder/1648954438689853441/show2.jpg',
					'/defaultUploadFolder/1648954438689853441/QQ录屏20230419153331.mp4',
					'/defaultUploadFolder/1648954438689853441/201539.mp3'
				]
			},
			isBody: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				images: [],
				videos: [],
				audios: [],

				videoShow: false,
				videoUrl: ''
			}
		},
		computed: {},
		mounted() {
			this.init()

			// if (this.isBody) {
			// 	let dom = document.querySelector('.video-all-screen')
			// 	document.body.appendChild(dom)
			// }
		},
		methods: {
			setData(files) {
				this.files = files
				this.init()
			},
			init() {
				if (!this.files) {
					return
				}
				let filesList = this.files.map((item) => {
					return '/api/smsl/file/downloadFileByUrl?fileUrl=' + item
				})
				this.images = filesList.filter((file) => /\.(jpg|jpeg|png|gif)$/i.test(file))
				this.videos = filesList.filter((file) => /\.(mp4|avi|mov|wmv)$/i.test(file))
				this.audios = filesList.filter((file) => /\.(mp3|wav|aac)$/i.test(file))
			},
			// js判断路径文件是否是图片
			isImageFile(path) {
				var reg = /\.(png|jpg|jpeg|gif)$/i // 定义匹配图片文件扩展名的正则表达式
				return reg.test(path) // 返回匹配结果
			},
			prviewImage(img, index) {
				uni.previewImage({
					urls: [img],
					current: 0
				})
			},
			showVideo(item) {
				if (this.isBody) {
					uni.$emit('showVideo', item)
					return
				}
				this.videoUrl = item
				this.videoShow = true
			},
			showVideoFroce(item) {
				this.videoUrl = item
				this.videoShow = true
			}
		}
	}
</script>
<style lang="less" scoped>
	.filesShow {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.image-style {
		width: 150rpx;
		height: 150rpx;
		margin-right: 10rpx;
	}
	.video-style {
		width: 150rpx;
		height: 150rpx;
		background: #444444;
		margin-right: 10rpx;
	}
	/deep/.video-all-screen {
		// .u-drawer {
		// 	width: 750rpx;
		// 	height: 100vh;
		// }
		.slot-content-modal {
			background: #000;
		}
	}
</style>
